<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>达人说</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <style media="screen">
        html,
        body {
            position: relative;
            height: 100%;
        }

        .banner {
            width: 100%;
            padding: 0 15px;
            padding-top: 10px;
            background-color: #fff;
            overflow: hidden;
        }

        .banner_inner {
            width: 100%;
            height: 175px;
        }

        .banner_inner>.swiper-container>.swiper-wrapper>.swiper-slide {
            width: 100%;
            height: 175px;
            border-radius: 5px;
        }

        .banner_inner>.swiper-container>.swiper-wrapper>.swiper-slide>img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .this_week_work {
            width: 100%;
            /*padding: 0 15px;*/
            box-sizing: border-box;
            padding-bottom: 10px;
            background-color: #fff;
            overflow: hidden;
        }

        .this_week_work .title {
            width: 100%;
            font-size: 16px;
            padding-left: 15px;
            box-sizing: border-box;
            font-family: PingFang SC;
            padding-top: 20px;
            color: #484848;
        }

        .content {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            margin-top: 10px;
        }

        .content div.content_item {
            overflow: hidden;
            background: #f5f5f5;
            border-radius: 5px;
        }

        .content div.content_item div.picture {
            width: 100%;
            height: 46px;
        }

        .content div.content_item div.picture img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .content div.content_item div.intro {
            width: 100%;
            padding-bottom: 10px;
        }

        .content div.content_item div.intro p {
            width: 100%;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #484848;
            padding-top: 4px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding-left: 10px;
        }

        .content div.content_item div.intro .author {
            width: 100%;
            padding: 0 10px;
            margin-top: 6px;
            display: flex;
            overflow: hidden;
        }

        .author .head_img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .author .head_img img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 50%;
        }

        .author .name {
            line-height: 30px;
            padding-left: 5px;
            box-sizing: border-box;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }

        .dataList {
            width: 100%;
            padding: 0 15px;
            margin-top: 10px;
            overflow: hidden;
        }

        .dataList ul {
            width: 100%;
            overflow: hidden;
        }

        .dataList ul li {
            width: 100%;
            padding: 10px;
            background-color: #fff;
            margin-top: 10px;
            overflow: hidden;
        }

        .dataList ul li .picture {
            width: 100%;
            height: 104px;
            position: relative;
            border-radius: 5px;
        }

        .dataList ul li .picture img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .dataList ul li .picture div {
            /*width: 80px;
            height: 20px;*/
            padding: 4px 10px;
            background: #fc9090;
            border-radius: 2.5px;
            position: absolute;
            bottom: -10px;
            left: 7.5px;
            border-radius: 4px;
            color: #fff;
        }

        .dataList ul li .picture div span {
            color: #fff;
            font-size: 14px;
        }

        .dataList ul li .title {
            width: 100%;
            height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 15px;
            margin-top: 18px;
        }

        .dataList ul li .intro {
            width: 100%;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-top: 8px;
        }

        .nav {
            width: 100%;
            padding: 0 15px;
            padding-right: 45px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
        }

        .nav .nav-menu {
            width: auto;
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0;
            /*text-align: center;*/
            /*padding-right: 22.5px;*/
            /* padding-top: 10px; */
        }

        .nav .nav-menu span {
            /*width: auto;*/
            display: block;
        }

        .nav .nav-menu span:first-child {
            width: 60px;
            height: 28px;
            line-height: 28px;
            color: #333333;
            text-align: center;
            font-size: 14px;
        }

        .nav .nav-menu span.selected {
            color: #ffffff !important;
            background: #8faaff;
            border-radius: 4px;
        }

        .talentsub-banner {
            width: 100%;
            padding-top: 1.25rem;
            overflow: hidden;
        }

        .talentsub-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 140px;
            background-image: url('http://img.fqapps.com/FqkeWFSpNCpKEiM6Qgm_sabSD5Ag')
        }

        .talentsub-content {
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px -2px;
            box-sizing: border-box;
        }

        .talentsub-content>a {
            display: block;
            text-decoration: none;
            outline: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .talentsub-img {
            width: 100%;
            display: block;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }

        .talentsub-text {
            display: block;
            background: #ffffff;
            color: #333333;
            padding: 1rem;
            font-size: 1.125rem;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }

        .talentsub-div {
            position: absolute;
            bottom: .625rem;
            right: .8rem;
            width: 3.125rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: .375rem;
            padding-top: 0;
            background: rgba(250, 250, 250, .9);
            border-top-left-radius: 6px;
            border-top-right-radius: 30px;
        }

        .talentsub-num {
            color: #809def;
            padding: .6rem 0;
            line-height: 1.25rem;
            font-size: .875rem;
        }

        .talentsub-num span:first-child {
            font-size: 1.125rem;
            display: block;
            text-align: center;
        }

        .talentsub-div img {
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 6px;
        }

        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="talentsub-banner swiper-container swiper4">
            <div class="talentsub-background"></div>
            <div class="swiper-wrapper" style="background-color:#fff;">
                <div class="talentsub-content swiper-slide" v-for='item in bannerUrl' @click='openTalentSayDetailsPage(item.id,item.name)'>
                    <a>
                        <img :src="item.articleBanner" alt="" class="talentsub-img">
                        <span class="talentsub-text">{{item.shortTitle}}</span>
                        <div class="talentsub-div">
                            <span class="talentsub-num">
                                <span>{{item.itemNum}}</span>
                            <span>单品</span>
                            </span>
                            <img :src="item.composeImage" alt="">
                        </div>
                    </a>
                </div>
                <!-- <div class="talentsub-content swiper-slide">
                    <a href="/talent/mobile_article_page/id/12970">
                        <img src="http://img-haodanku-com.cdn.fudaiapp.com/FoClVLbWH9ZHgpmBOyNKuumTbdxW" alt="" class="talentsub-img">
                        <span class="talentsub-text">拯救节后上班犯困</span>
                        <div class="talentsub-div">
                            <span class="talentsub-num">
                                <span>11</span>
                            <span>单品</span>
                            </span>
                            <img src="http://img.alicdn.com/imgextra/i2/832059558/O1CN01n48E4P2KTcAzGL4Wq_!!832059558.jpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="talentsub-content swiper-slide">
                    <a href="/talent/mobile_article_page/id/12908">
                        <img src="http://img-haodanku-com.cdn.fudaiapp.com/FnkvoDoFOd7687T35FgCn5K1KrU4" alt="" class="talentsub-img">
                        <span class="talentsub-text">缓解痛经小神器</span>
                        <div class="talentsub-div">
                            <span class="talentsub-num">
                                <span>11</span>
                            <span>单品</span>
                            </span>
                            <img src="https://img.alicdn.com/imgextra/i2/2206330696/O1CN01qbPfWf1H0oHTDgRRD_!!2206330696.png" alt="">
                        </div>
                    </a>
                </div>
                <div class="talentsub-content swiper-slide">
                    <a href="/talent/mobile_article_page/id/12887">
                        <img src="http://img-haodanku-com.cdn.fudaiapp.com/FqC1f0zKtqH89WcGrI9nYZfrVXEA" alt="" class="talentsub-img">
                        <span class="talentsub-text">打造初秋日常妆必备</span>
                        <div class="talentsub-div">
                            <span class="talentsub-num">
                                <span>23</span>
                            <span>单品</span>
                            </span>
                            <img src="https://img.alicdn.com/imgextra/i3/2298996821/O1CN010n3qfv20G4BqKXFeY_!!2298996821.jpg" alt="">
                        </div>
                    </a>
                </div> -->
            </div>
        </div>

        <!-- <div class="banner" id="banner">
            <div class="banner_inner">
                <div class="swiper-container swiper4">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for='item in bannerUrl'>
                          <img :src="item.image" alt="">
                          <span>彭祥伟</span>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="this_week_work" id="week">
            <div class="title">本周新作</div>
            <div class="content">
                <div class="swiper-container swiper3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for='item in newWork' @click='openTalentSayDetailsPage(item.id,item.name)'>
                            <div class="content_item">
                                <div class="picture"><img :src="item.articleBanner" alt=""></div>
                                <div class="intro" @click='openAuthorPage(item.talentId)'>
                                    <p>{{item.shortTitle}}</p>
                                    <div class="author">
                                        <div class="head_img"><img :src="item.headImg" alt=""></div>
                                        <div class="name">{{item.talentName}}</div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="nav">
            <div class="nav-menu" v-for='(item,index) in items'>
                <span :class="{'selected':isActive==index}" tapmode @click="change(index,item.id)">{{item.title}}</span>
                <!-- <span :class="{'selected_line':isActive==index}"></span> -->
            </div>
        </div>

        <div class="dataList">
            <ul>
                <li v-for='item in dataList' @click='openTalentSayDetailsPage(item.id,item.name)'>
                    <div class="picture">
                        <img src="../../image/banner_place.png" v-cache-src="item.articleBanner" alt="">
                        <div>
                            <span v-if='item.talentcat==1'>好物</span>
                            <span v-if='item.talentcat==2'>时尚</span>
                            <span v-if='item.talentcat==3'>美食</span>
                            <span v-if='item.talentcat==4'>生活</span>/

                            <span>{{item.itemNum}}</span>
                        </div>
                    </div>
                    <div class="title">{{item.name}}</div>
                    <div class="intro aui-ellipsis-2">{{item.article}}</div>
                </li>
            </ul>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript" src="../../script/swiper-bundle.min.js"></script>
<script type="text/javascript">
/**
 * [注册一个全局自定义指令 `V-   cache-src`]
 * @param  {[type]} el      [需要图片缓存的元素]
 * @param  {[type]} binding [服务器图片对象数据]
 * @return {[type]}         [服务器图片地址]
 */
Vue.directive('cache-src', function(el, binding) {
    if (binding) {
        setTimeout(function() {
            api.imageCache({
                url: binding.value,
                thumbnail: false
            }, function(ret, err) {
                if (ret && ret.status) {
                    el.setAttribute("src", ret.url);
                }
            });
        }, 100);
    }
});
    apiready = function() {
        // var swiper = new Swiper('.swiper4', {
        //     autoplay: true,
        //     loop: true,
        //     observeParents: true,
        //     observer: false,
        // });


        setTimeout(function() {
            var swiper = new Swiper('.swiper5', {
                spaceBetween: 20,
                slidesPerView: 'auto',
                freeMode: true
            }, 10);
        });
        vm.init(0);
        vm.init_(0)


        // vm.initNavList()

    }
    var vm = new Vue({
        el: '#app',
        data: {
            bannerUrl: [],
            newWork: [],
            dataList: [],
            isActive: 0,
            items: [{
                title: '精选',
                id: '0'
            }, {
                title: '好物',
                id: '1'
            }, {
                title: '时尚',
                id: '2'
            }, {
                title: '美食',
                id: '3'
            }, {
                title: '生活',
                id: '4'
            }]
        },
        methods: {
            change: function(index, id) {
                vm.isActive = index;
                vm.dataList = [];
                vm.init(index);

            },
            openAuthorPage: function(id) {
                event.preventDefault();
                event.stopPropagation();
                cl.openWin({
                    name: 'talent_intro',
                    pageParam: {
                        id: id
                    }
                })
            },
            init_:function(index){
              api.ajax({
                  url: cl.apiServer + 'doumee/talentInfo/talent_info',
                  method: 'post',
                  headers: {
                      token: cl.userToken
                  },
                  data: {
                      values: {
                          talentcat: index,
                          version:cl.deviceInfo().appVersion,
                          mobileInfo:cl.systemType()
                      }
                  }
              }, function(ret, err) {
                  // alert(JSON.stringify(ret));
                  if (ret) {
                      if (ret.code == 0) {
                          vm.bannerUrl = ret.data.topdata;
                          vm.newWork = ret.data.newdata;
                          setTimeout(function() {
                              var swiper = new Swiper('.swiper3', {
                                  slidesPerView: 2,
                                  spaceBetween: 15,
                                  autoplay: {
                                      delay: 3000,
                                      disableOnInteraction: false,
                                      waitForTransition: true,
                                  },
                                  freeMode: false,
                                  touchRatio: 1,
                                  observeParents: true,
                                  observer: true,
                                  loop: true,
                              });
                          }, 10);
                          setTimeout(function() {
                              var swiper1 = new Swiper('.swiper4', {
                                  autoplay: {
                                      delay: 3000,
                                      disableOnInteraction: false,
                                      waitForTransition: true,
                                  },
                                  loop: true,
                                  slidesPerView: 1.2,
                                  spaceBetween: 20,
                                  centeredSlides: true,
                                  resistanceRatio: 0,
                                  freeMode: false,
                                  touchRatio: 1,
                                  observeParents: true,
                                  observer: false,
                              });
                          }, 10)
                      }
                  }
              })
            },
            init: function(index) {
                //  alert(index)
                api.ajax({
                    url: cl.apiServer + 'doumee/talentInfo/talent_info',
                    method: 'post',
                    headers: {
                        token: cl.userToken
                    },
                    data: {
                        values: {
                            talentcat: index,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    // alert(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            // vm.bannerUrl = ret.data.topdata;
                            // vm.newWork = ret.data.newdata;
                            vm.dataList = ret.data.clickdata;
                        }
                    }
                })
            },
            openTalentSayDetailsPage: function(id, title) {
                console.log(id);
                cl.openWin({
                    name: 'talent_say_details',
                    pageParam: {
                        id: id,
                        title: title
                    }
                })
            }
        }
    });
</script>

</html>
